{% extends 'layout/manage.html' %}

{% block content %}
    <div class="container-fluid project">
        <!-- Button trigger modal -->
        <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
            <i class="fa fa-plus-circle" aria-hidden="true"/></i> 添加订单
        </button>
    </div>
    <div class="container">
        <div style="margin-bottom: 10px" class="clearfix">
            <div style="float: right;width: 300px;">
                <form method="get">
                    <div class="input-group">
                        <input type="text" name="search" class="form-control" placeholder="请输入订单号："
                               value="{{ search_data }}">
                        <span class="input-group-btn">
                        <button class="btn btn-default" type="submit">
                            <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
                        </button>
                      </span>
                    </div>
                </form>
            </div>

        </div>
        <div class="panel panel-default">
            <!-- Default panel contents -->
            <div class="panel-heading">
                <span class="glyphicon glyphicon-th-list" aria-hidden="true"></span>
                订单列表
            </div>

            <!-- Table -->
            <table class="table table-bordered">
                <thead>
                <tr>
                    <th>加入区块链</th>
                    <th>ID</th>
                    <th>订单号</th>
                    <th>订单日期</th>
                    <th>客户号</th>
                    <th>客户名</th>
                    <th>产品号</th>
                    <th>产品名</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                {% for obj in queryset %}
                    <tr>
                        <th>
                            <div>
                                {% if obj.is_block == -1 %}
                                    <i class="fa fa-star" aria-hidden="true" style="color: #eea236"></i>
                                {% else %}
                                    <a href="/block/add/?nid={{ obj.id }}">
                                        <i class="fa fa-star" aria-hidden="true" style="color: #d5d5d5"></i>
                                    </a>
                                {% endif %}
                            </div>
                        </th>
                        <th>{{ obj.id }}</th>
                        <td>{{ obj.order_id }}</td>
                        <td>{{ obj.order_date }}</td>
                        <td>{{ obj.customer_id }}</td>
                        <td>{{ obj.customer_name }}</td>
                        <td>{{ obj.product_id }}</td>
                        <td>{{ obj.product_name }}</td>
                        <td>
                            {% if obj.is_block == -1 %}
                                <a class="btn btn-primary btn-xs" href="/order/{{ obj.id }}/edit/" disabled="true">编辑</a>
                                <a class="btn btn-danger btn-xs" href="/order/{{ obj.id }}/delete/" disabled="true">删除</a>
                            {% else %}
                                <a class="btn btn-primary btn-xs" href="/order/{{ obj.id }}/edit/">编辑</a>
                                <a class="btn btn-danger btn-xs" href="/order/{{ obj.id }}/delete/">删除</a>
                            {% endif %}
                        </td>
                    </tr>
                {% endfor %}

                </tbody>
            </table>
        </div>
        <div class="clearfix">
            <ul class="pagination">
                {{ page_string }}
            </ul>

        </div>

    </div>


    <!-- Modal -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">添加订单</h4>
                </div>
                <div class="modal-body">
                    <form method="post" id="addForm">
                        {% csrf_token %}
                        {% for obj in form %}
                            <div class="form-group">
                                <label>{{ obj.label }}</label>
                                {{ obj }}
                                <span style="color :red">{{ obj.errors.code }}</span>
                            </div>
                        {% endfor %}
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button id="btnSubmit" type="button" class="btn btn-primary">添加</button>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block js %}
    <script>
        $(function () {
            bindSubmit();
        });

        function bindSubmit() {
            $('#btnSubmit').click(function () {
                $.ajax({
                    url: "{% url 'order_add' %}",
                    type: "POST",
                    data: $('#addForm').serialize(),
                    dataType: "JSON",
                    success: function (res) {
                        console.log(res);
                        if (res.status) {
                            location.href = location.href;
                        } else {
                            $.each(res.error, function (key, value) {
                                $('#id_' + key).next().text(value[0])
                            })
                        }
                    }

                })
            })
        }
    </script>
{% endblock %}